<template>
    <view>
        <!-- pages/setDoorInfo/setDoorInfo.wxml -->
        <view class="container" :style="isIpx ? 'padding-bottom:168rpx' : 'padding-bottom:120rpx'">
            <view class="form">
                <view class="line">
                    <label>房间名称：</label>
                    <view class="right">
                        <input v-model="roomName" type="text" placeholder="请输入" />
                    </view>
                </view>
                <view class="line">
                    <label>房间简称：</label>
                    <view class="right">
                        <input v-model="roomCallName" type="text" placeholder="请输入" />
                    </view>
                </view>
                <view class="tips">注:云喇叭播报的房间名称,尽量简短,不要超过6个字.例:VIP1</view>
                <view class="line">
                    <label>房间类别：</label>
                    <view class="right">
                        <view class="city">
                            <picker @change="bindRoomClassChange" :value="rcIndex" range-key="name" :range="roomClassList">
                                <view class="picker">
                                    <input type="text" disabled placeholder="请选择" placeholder-class="plh" :value="roomClassList[rcIndex].name" />
                                    <view class="iconfont icon-xuanzex"></view>
                                </view>
                            </picker>
                        </view>
                    </view>
                </view>
                <view class="line">
                    <label>房间类型：</label>
                    <view class="right">
                        <view class="city">
                            <picker @change="bindTypeChange" :value="index" range-key="name" :range="types">
                                <view class="picker">
                                    <input type="text" disabled placeholder="请选择" placeholder-class="plh" :value="types[index].name" />
                                    <view class="iconfont icon-xuanzex"></view>
                                </view>
                            </picker>
                        </view>
                    </view>
                </view>
                <view class="line">
                    <label>不需要清洁：</label>
                    <view class="right">
                        <view>
                            <switch @change="changeSwitchStatus" :checked="jumpClear" />
                        </view>
                    </view>
                </view>
                <view class="line">
                    <label>房间单价：</label>
                    <view class="right">
                        <view class="price">
                            <input v-model="price" type="digit" placeholder="请输入" />
                            <text>元/小时</text>
                        </view>
                    </view>
                </view>
                <view class="line">
                    <label>房间押金：</label>
                    <view class="right">
                        <view class="price">
                            <input v-model="deposit" type="digit" placeholder="请输入" />
                            <text>元</text>
                        </view>
                    </view>
                </view>
                <!-- <view class="line">
      <label>闲时单价：</label>
      <view class="right">
        <view class="price">
          <input model:value="{{workPrice}}" type="digit" placeholder="请输入"/>
          <text>元/小时</text>
        </view>
      </view>
    </view> -->
                <view class="line">
                    <label>通宵价格：</label>
                    <view class="right">
                        <view class="price">
                            <input v-model="tongxiaoPrice" type="digit" placeholder="请输入" />
                            <text>元/场</text>
                        </view>
                    </view>
                </view>
                <view class="line">
                    <label>最低下单小时：</label>
                    <view class="right">
                        <view class="price">
                            <input v-model="minHour" type="text" placeholder="请输入1-4的数字" />
                            小时
                        </view>
                    </view>
                </view>
                <view class="line">
                    <label>提前开始时间：</label>
                    <view class="right">
                        <view class="price">
                            <input v-model="leadHour" type="text" placeholder="请输入1-12的数字" />
                            小时
                        </view>
                    </view>
                </view>
                <view class="line">
                    <label>提前下单天数：</label>
                    <view class="right">
                        <input style="width: 300rpx" v-model="leadDay" type="text" placeholder="请输入1-5的数字" />
                        天
                    </view>
                </view>
                <view class="line">
                    <label>排序位置：</label>
                    <view class="right">
                        <input style="width: 300rpx" v-model="sortId" type="number" placeholder="数字越小排名靠前" />
                    </view>
                </view>
                <view class="line">
                    <label>喇叭音量：</label>
                    <view class="right">
                        <input style="width: 400rpx" v-model="yunlabaSound" type="number" placeholder="请输入，数字1-5" />
                    </view>
                </view>
                <view class="line">
                    <label>禁用时间：</label>
                    <view class="right">
                        <view class="search">
                            <view class="iconfont icon-date"></view>
                            <input @click="chooseTime" data-type="start" type="text" placeholder="开始" disabled :value="banTimeStart" />
                            <text>至</text>
                            <input @click="chooseTime" data-type="end" type="text" placeholder="结束" disabled :value="banTimeEnd" />
                        </view>
                        <view class="icon iconfont icon-close" @click="clearBanTime"></view>
                    </view>
                </view>
                <view class="tips">注:每日固定时间段该房间不可用，不禁用就不填写</view>
                <view class="line">
                    <label>房间标签：</label>
                    <view class="right">
                        <view class="tags">
                            <textarea v-model="label" type="text" placeholder="输入标签，用逗号分隔" />
                        </view>
                    </view>
                </view>
                <view class="tips">注:请使用英文的逗号进行分隔</view>
                <view class="line">
                    <label>房间图片：</label>
                    <view class="right">
                        <van-uploader :file-list="fileList" @after-read="afterRead" @delete="deleteFun" preview-size="200rpx" max-count="9" />
                    </view>
                </view>
            </view>
            <!-- 底部按钮 -->
            <view :class="'submit border-primary ' + (isIpx ? 'fix-iphonex-button' : '')">
                <button hover-class="button-click" class="color-primary cancel" @tap="cancel">取消</button>
                <button hover-class="button-click" class="bg-primary" @tap="submit">保存</button>
            </view>
        </view>
        <!-- 时间选择弹窗 -->
        <van-popup :show="showtime" position="bottom" custom-style="height: 60%">
            <van-datetime-picker type="time" :value="currentDate" :filter="filter" @confirm="timeChange" @cancel="timeCancel"></van-datetime-picker>
        </van-popup>
        <van-dialog use-slot title="选择房间标签" :show="showLabel" show-cancel-button @confirm="saveLabel">
            <view class="dialog">
                <checkbox-group @change="checkboxChange">
                    <view class="checkbox">
                        <label class="label" v-for="(item, index) in labels" :key="index">
                            <checkbox :value="item.label" :checked="item.checked" />

                            {{ item.label }}
                        </label>
                    </view>
                </checkbox-group>
            </view>
        </van-dialog>
    </view>
</template>

<script>
// pages/setDoorInfo/setDoorInfo.js
const app = getApp();
var http = require('../../../utils/http');
var util1 = require('../../../utils/util.js');
export default {
    data() {
        return {
            index: 0,

            roomClassList: [
                {
                    id: 0,
                    name: '棋牌'
                },
                {
                    id: 1,
                    name: '台球'
                },
                {
                    id: 2,
                    name: '自习室'
                }
            ],

            rcIndex: 0,

            types: [
                {
                    id: 1,
                    name: '小包'
                },
                {
                    id: 2,
                    name: '中包'
                },
                {
                    id: 3,
                    name: '大包'
                },
                {
                    id: 4,
                    name: '豪包'
                },
                {
                    id: 5,
                    name: '商务包'
                }
            ],

            storeId: '',
            roomId: '',
            roomName: '',
            roomCallName: '',
            jumpClear: false,
            type: '',
            roomClass: '',
            price: '',
            deposit: '',
            tongxiaoPrice: '',
            minHour: '',
            leadHour: '',
            leadDay: '',
            label: '',
            sortId: '',
            yunlabaSound: '',
            fileList: [],
            banTimeStart: '',
            banTimeEnd: '',
            showtime: false,

            //时间弹
            timetype: '',

            //点击的开始还是结束
            currentDate: '12:00',

            showtimefalge: false,

            filter(type, options) {
                if (type === 'minute') {
                    return options.filter((option) => option % 30 === 0);
                }
                return options;
            },

            showLabel: false,
            labels: [],
            isIpx: app.globalData.isIpx ? true : false,
            name: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        if (options.storeId) {
            this.setData({
                storeId: Number(options.storeId)
            });
        }
        if (options.roomId) {
            this.setData({
                roomId: Number(options.roomId)
            });
            this.getData();
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 获取详情
        getData: function () {
            let that = this;
            if (app.globalData.isLogin) {
                http.request(
                    '/member/store/getRoomDetail/' + that.roomId,
                    '1',
                    'get',
                    {
                        roomId: that.roomId
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            let fileList = [];
                            if (info.data.imageUrls) {
                                let arr = info.data.imageUrls.split(',');
                                arr.map((it) => {
                                    fileList.push({
                                        url: it
                                    });
                                });
                            }
                            let ind = '';
                            that.types.map((it, index) => {
                                if (it.id == info.data.type) {
                                    ind = index;
                                }
                            });
                            let rcIndex = '';
                            that.roomClassList.map((it, index) => {
                                if (it.id == info.data.roomClass) {
                                    rcIndex = index;
                                }
                            });
                            that.setData({
                                index: ind,
                                rcIndex: rcIndex,
                                roomId: info.data.roomId,
                                roomName: info.data.roomName,
                                roomCallName: info.data.roomCallName,
                                jumpClear: info.data.jumpClear,
                                type: info.data.type,
                                roomClass: info.data.roomClass,
                                price: info.data.price,
                                deposit: info.data.deposit,
                                leadHour: info.data.leadHour,
                                minHour: info.data.minHour,
                                leadDay: info.data.leadDay,
                                tongxiaoPrice: info.data.tongxiaoPrice,
                                label: info.data.label,
                                sortId: info.data.sortId,
                                yunlabaSound: info.data.yunlabaSound,
                                fileList: fileList,
                                banTimeStart: info.data.banTimeStart,
                                banTimeEnd: info.data.banTimeEnd
                            });
                        } else {
                            uni.showModal({
                                content: '请求服务异常，请稍后重试',
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        },

        bindTypeChange: function (e) {
            //console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
                index: e.detail.value,
                type: this.types[e.detail.value].id
            });
        },

        bindRoomClassChange: function (e) {
            //console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
                rcIndex: e.detail.value,
                roomClass: this.roomClassList[e.detail.value].id
            });
        },

        // 图片上传
        afterRead(event) {
            let that = this;
            const { file } = event.detail;
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            uni.uploadFile({
                url: app.globalData.baseUrl + '/member/store/uploadImg',
                filePath: file.url,
                name: 'file',
                header: {
                    'tenant-id': app.globalData.tenantId,
                    'Content-Type': 'application/json',
                    Authorization: 'Bearer ' + app.globalData.userDatatoken.accessToken
                },
                success(res) {
                    // 上传完成需要更新 fileList
                    var data = JSON.parse(res.data);
                    const { fileList = [] } = that;
                    fileList.push({
                        url: data.data
                    });
                    that.setData({
                        fileList: fileList
                    });
                }
            });
        },

        deleteFun(event) {
            let index = event.detail.index;
            const { fileList = [] } = this;
            fileList.splice(index, 1);
            this.setData({
                fileList
            });
        },

        // 选时间
        chooseTime(e) {
            let timetype = e.currentTarget.dataset.type;
            this.setData({
                showtime: true,
                timetype: timetype
            });
        },

        // 比较时间大小
        CompareDate: function (time1, time2) {
            var date = new Date();
            if (time1 && time2) {
                var a = time1.split(':');
                var b = time2.split(':');
                return date.setHours(a[0], a[1]) < date.setHours(b[0], b[1]);
            } else {
                return true;
            }
        },

        // 时间选择后赋值
        timeChange: function (event) {
            let that = this;
            if (that.timetype == 'start') {
                that.setData({
                    showtime: false,
                    banTimeStart: event.detail
                });
            } else if (that.timetype == 'end') {
                that.setData({
                    showtime: false,
                    banTimeEnd: event.detail
                });
            }
        },

        timeCancel: function () {
            let that = this;
            that.setData({
                showtime: false
            });
        },

        // 取消
        cancel: function () {
            uni.navigateBack({
                delta: 1
            });
        },

        // 保存
        submit: function () {
            console.log(this);
            if (
                this.roomName &&
                this.roomCallName &&
                this.type &&
                this.price &&
                this.tongxiaoPrice &&
                this.minHour &&
                this.leadHour &&
                this.leadDay &&
                this.label 
				&&
                this.fileList.length
            ) {
                let that = this;
                let imgs = [];
                that.fileList.map((it) => {
                    imgs.push(it.url);
                });
                if (app.globalData.isLogin) {
                    http.request(
                        '/member/store/saveRoomDetail',
                        '1',
                        'post',
                        {
                            roomId: that.roomId,
                            storeId: that.storeId,
                            roomName: that.roomName,
                            roomCallName: that.roomCallName,
                            jumpClear: that.jumpClear,
                            type: that.type,
                            roomClass: that.roomClass,
                            price: that.price,
                            deposit: that.deposit,
                            minHour: that.minHour,
                            leadHour: that.leadHour,
                            leadDay: that.leadDay,
                            tongxiaoPrice: that.tongxiaoPrice,
                            label: that.label,
                            imageUrls: imgs.join(','),
                            sortId: that.sortId,
                            yunlabaSound: that.yunlabaSound,
                            banTimeStart: that.banTimeStart,
                            banTimeEnd: that.banTimeEnd
                        },
                        app.globalData.userDatatoken.accessToken,
                        '',
                        function success(info) {
                            console.info('返回111===');
                            console.info(info);
                            if (info.code == 0) {
                                uni.showToast({
                                    title: '设置成功',
                                    icon: 'success'
                                });
                                setTimeout(() => {
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                }, 1000);
                            } else {
                                uni.showModal({
                                    content: info.msg,
                                    showCancel: false
                                });
                            }
                        },
                        function fail(info) {}
                    );
                }
            } else {
                uni.showToast({
                    title: '请填写完整',
                    icon: 'none'
                });
            }
        },

        // 输入框只能输入数字
        inputNumber: function (e) {
            let that = this;
            let value = e.detail.value;
            var anumber = value.replace(/[^\d]/g, '');
            that.setData({
                sortId: anumber
            });
            return anumber;
        },

        // 输入框只能输入数字和小数点
        inputNumberDot: function (e) {
            let value = e.detail.value;
            return value.replace(/[^\d.]/g, '');
        },

        checkboxChange(e) {
            //console.log('checkbox发生change事件，携带value值为：', e.detail.value)
            const labels = this.labels;
            const values = e.detail.value;
            for (let i = 0, lenI = labels.length; i < lenI; ++i) {
                labels[i].checked = false;
                for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
                    if (labels[i].label === values[j]) {
                        labels[i].checked = true;
                        break;
                    }
                }
            }
            this.setData({
                labels: labels
            });
        },

        //清除禁用时间
        clearBanTime: function () {
            this.setData({
                banTimeStart: '',
                banTimeEnd: ''
            });
        },

        changeSwitchStatus: function () {
            this.setData({
                jumpClear: !this.jumpClear // 根据当前状态取反
            });

            console.log(this.jumpClear);
        },

        saveLabel() {
            console.log('占位：函数 saveLabel 未声明');
        }
    }
};
</script>
<style>
@import './setDoorInfo.css';
</style>
